<template>
    <div>
        <el-button type="primary" @click="addSwiper" class="title">添加轮播图</el-button><em>注：请谨慎使用，过多数据会影响首页加载速度。</em><strong>请上传宽度为1920px以上图片</strong>
        <el-table
                class="form-table"
                :data="firstSwiper"
                style="width:80%">
            <el-table-column
                    label="展示图片"
                    width="100">
                <template slot-scope="scope">
                    <img :src="scope.row.imgUrl" alt="">
                </template>
            </el-table-column>
            <el-table-column
                    prop="url"
                    label="跳转网址"
                    width="500">
            </el-table-column>
            <el-table-column
                    label="删除"
            width="100">
                <template slot-scope="scope">
                    <el-button size="small" type="danger" @click="delFirstSwiper(scope)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <shade v-show="isAdd">
            <div class="box">
                <i class="el-icon-error close" @click="close"></i>
                <h2>添加轮播信息</h2>
                <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :auto-upload="false"
                        :limit="1"
                        name="firstSwiper"
                        ref="upload"
                        :on-remove="handleRemove"
                        :on-change="handleChange"
                        list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传一张jpg/png文件</div>
                </el-upload>
                <el-input v-model="addForm.url" placeholder="请输入跳转链接"></el-input>
                <el-button type="primary" @click="submit">提交</el-button>
            </div>
        </shade>
    </div>
</template>

<script>
    import Shade from "../../../../components/common/shade/Shade";
    import {sendwithget, sendwithpost} from "../../../../network/profile";

    export default {
        name: "firstSwiper",
        data() {
            return {
                firstSwiper: [],
                isAdd: false,
                addForm: {}
            }
        },
        created() {
            this.getData()
        },
        components: {Shade},
        methods: {
            addSwiper() {
                this.isAdd = true
            },
            handleChange(file) {
                this.addForm.img =  file.raw
            },
            handleRemove() {
              this.addForm.img = null
            },
            close() {
                this.addForm = {}
                this.isAdd = false
            },
            submit() {
                if (!this.addForm.img) {
                    this.$message({
                        message: '请上传一张图片',
                        type: 'error'
                    })
                }else if (!this.addForm.url) {
                    this.$message({
                        message: '请填写跳转地址',
                        type: 'error'
                    })
                }else {
                    let formData = new FormData();
                    formData.append('firstSwiper', this.addForm.img)
                    formData.append('url', this.addForm.url)
                    sendwithpost({
                        url: '/addFirstSwiper',
                        data: formData
                    }).then(res=> {
                        this.$message({
                            showClose: true,
                            message: res.data.message,
                            type: res.data.type
                        })
                        if (res.data.res_code == 2) {
                            this.close()
                            this.$refs.upload.clearFiles()
                            this.getData()
                        }
                    })
                }
            },
            getData() {
                sendwithget({
                    url: '/getBaseSetData',
                    data: {
                        type: '1'
                    }
                }).then(res=> {
                    if (res.data.res_code == 2) {
                        this.firstSwiper = res.data.data
                    }
                })
            },
            delFirstSwiper(scope) {
                console.log(scope)
                sendwithpost({
                    url: '/delFirstSwiper',
                    data: {
                        filename: scope.row.fileName,
                    }
                }).then(res=> {
                    this.$message({
                        showClose: true,
                        message: res.data.message,
                        type: res.data.type
                    })
                    if(res.data.res_code == 2) {
                        this.firstSwiper.splice(scope.$index, 1)
                    }
                })
            }
        }

    }
</script>

<style scoped>
    .box {
        width: 600px;
        height: 400px;
        background-color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        padding: 40px;
    }
    .close {
        position: absolute;
        color: #999999;
        right: 20px;
        top: 20px;
        cursor: pointer;
    }
    img {
        width: 80px;
        height: 80px;
        overflow: hidden;
    }
    em {
        font-size: 14px;
        color: #999999;
        margin-left: 20px;
    }
    .form-table {
        margin-top: 20px;
    }
</style>